/**
 * Created by yzdd on 2018/6/1.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  SectionList
} from 'react-native';
import {publicStyle, width} from "../utils/publiscStyle";

const styles = StyleSheet.create({
  searchHeader: {
    width,
    height: 49,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#EEEEEE",
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#E1E1E1",
  },
  leftInputView: {
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    height: 35,
    borderRadius: 5,
    paddingLeft: 14
  },
  icon3: {
    width: 16,
    height: 16
  },
  leftInput: {
    flex: 1,
    padding: 0,
    paddingLeft: 10,
    fontSize: 14
  },
  searchBtn: {
    width: 53,
    height: 35,
    alignItems: 'center',
    justifyContent: "center"
  },
  font7: {
    fontSize: 14,
    color: "#666666"
  },
  info: {
    width,
    height: 25,
    alignItems: 'center',
    justifyContent: "center",
    backgroundColor: "#EEEEEE"
  },
  font8: {
    fontSize: 12,
    color: "#999999"
  },
  stockItem: {
    width,
    height: 74,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: 12,
    paddingBottom: 12,
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#EEEEEE",
    backgroundColor: "#FFFFFF"
  },
  leftStockItem: {
    flexDirection: 'column',
    height: 50,
    justifyContent: 'space-between',
  },
  font9: {
    fontSize: 16,
    color: "#000000"
  },
  font10: {
    fontSize: 14,
    color: "#999999"
  },
  font11: {
    fontSize: 14,
    color: "#333333"
  },
  addBtn: {
    width,
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: "#F5F5F5",
    justifyContent: 'center'
  },
  icon4: {
    tintColor: "#1AAD19",
    width: 17,
    height: 17,
    marginRight: 10
  },
  font12: {
    fontSize: 16,
    color: "#1AAD19"
  }
});

const searchIcon = require("../assets/search.png");
const jiahaoIcon = require("../assets/jiahao.png");

const sections = [
  {
    key: "2018-05-11",
    data: [
      {name: "王健", type: "租赁", place: "上海-BD部"},
      {name: "王健", type: "租赁", place: "上海-BD部"},
      {name: "王健", type: "租赁", place: "上海-BD部"},
    ]
  },
  {
    key: "2018-04-11",
    data: [
      {name: "王健", type: "租赁", place: "上海-BD部"},
    ]
  },
  {
    key: "2018-03-11",
    data: [
      {name: "王健", type: "租赁", place: "上海-BD部"},
      {name: "王健", type: "租赁", place: "上海-BD部"},
      {name: "王健", type: "租赁", place: "上海-BD部"},
    ]
  }
];

//库存-领用
export default class StockCaller extends Component {
  static navigationOptions = {
    title: "库存领用"
  }

  sectionHeader = (info) => {
    console.log(info)
    return (
      <View style={styles.info}>
        <Text style={styles.font8}>{info.section.key}</Text>
      </View>
    )
  };

  _renderItem = (info) => {
    return <Item navigation={this.props.navigation}/>
  }

  toAdd = ()=>{
    const {navigate} = this.props.navigation;
    // navigate("")
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.searchHeader}>
          <View style={styles.leftInputView}>
            <Image
              source={searchIcon}
              resizeMode={"contain"}
              style={styles.icon3}
            />
            <TextInput
              style={styles.leftInput}
              placeholder={"请输入员工姓名"}
              underlineColorAndroid="transparent"
            />
          </View>
          <TouchableOpacity style={styles.searchBtn}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>
        <SectionList
          renderItem={this._renderItem}
          renderSectionHeader={this.sectionHeader}
          sections={sections}
          keyExtractor={(item, index) => index}
          bounces={false}
          showsVerticalScrollIndicator={false}
        />
        <TouchableOpacity style={styles.addBtn} onPress={this.toAdd}>
          <Image
            source={jiahaoIcon}
            resizeMode={"contain"}
            style={styles.icon4}
          />
          <Text style={styles.font12}>创建领用单</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class Item extends Component {
  render() {
    return (
      <View style={styles.stockItem}>
        <View style={styles.leftStockItem}>
          <Text style={styles.font9}>王健</Text>
          <Text style={styles.font10}>领用类型: 租赁</Text>
        </View>
        <Text style={styles.font11}>上海-BD部</Text>
      </View>
    )
  }
}